<template>
  <div class="Consultive">
    <h2>咨询管理</h2>
    <div class="top_inputl">
      <div class="tab-inp">
        <div class="bre">
          <b>搜索:</b>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="bre">
          <span>状态：</span>
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in tableData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <el-button type="info" @click="sousuo">查询</el-button>
        <el-button type="primary" @click="add()">新建</el-button>
        <el-dialog title="收货地址" :visible.sync="dialogForm">
          <el-form :model="form">
            <el-form-item label="活动名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="活动名称" :label-width="formLabelWidth">
              <el-input v-model="form.price" autocomplete="off"></el-input>
            </el-form-item>
             <el-form-item label="活动名称" :label-width="formLabelWidth">
              <el-input v-model="form.time" autocomplete="off"></el-input>
            </el-form-item>
             <el-form-item label="活动名称" :label-width="formLabelWidth">
              <el-input v-model="form.city" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogForm = false">取 消</el-button>
            <el-button type="primary" @click="addLi()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      :header-cell-style="{ background: '#efefef', color: '#606266' }"
    >
      <el-table-column prop="id" label="序号" width="180"> </el-table-column>
      <el-table-column prop="name" label="文章标题" width="180">
      </el-table-column>
      <el-table-column prop="name" label="创建人"> </el-table-column>
      <el-table-column prop="time" label="创建时间" width="180">
      </el-table-column>
      <el-table-column prop="address" label="状态">
        <template scope="scope">
          <el-switch
            on-text="是"
            off-text="否"
            on-color="#5B7BFA"
            off-color="#dadde5"
            v-model="scope.row.address"
            @change="change(scope.$index, scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index, tableData)"
            type="text"
            size="small"
          >
            移除
          </el-button>
          <el-button
            @click.native.prevent="edit(scope.row, tableData)"
            type="text"
            size="small"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="form.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="公司" :label-width="formLabelWidth">
          <el-input v-model="form.city" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="租房" :label-width="formLabelWidth">
          <el-input v-model="form.time" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editLi()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      tableData: [],
      value: "",
      input: "",

      dialogFormVisible: false,
      dialogForm: false,
      form: {
        name: "",
        city: "",
        price: "",
        time: "",
      },
      form: {
        name: "",
        city: "",
        price: "",
        time: "",
      },
      formLabelWidth: "120px",
    };
  },
  created() {
    axios.get("http://127.0.0.1:7001/getList").then((res) => {
      this.tableData = res.data.data;
    });
  },
  methods: {
    changeSwitch() {},
    edit(row) {
      this.dialogFormVisible = true;
      Object.assign(this.form, { ...row });
    },
    editLi() {
      axios
        .put("http://127.0.0.1:7001/editList", { ...this.form })
        .then((res) => {
          this.dialogFormVisible = false;
          this.$router.go(0);
        });
    },
    add(){
      this.dialogForm=true
    },
    addLi(){
      axios.put("http://127.0.0.1:7001/addList",{...this.form}).then(res=>{
          this.dialogForm=false
          this.$router.go("0")
      })
    },
    // 搜索
    sousuo() {
      axios
        .get(`http://127.0.0.1:7001/getList/?keyword=${this.input}`)
        .then((res) => {
          this.tableData = res.data.data;
        });
    },
    change: function(index, row) {
      console.log(index, row);
    },
  },
};
</script>

<style></style>
